<script setup>
import {XXisShow,PicCateAllList} from '@/hooks/Picker'
import { reactive, ref } from 'vue';
import {getSermailboxRevert,getSermailboxModify} from '@/api/Sermailbox'
import SwyQuill from '@/components/ZXSimg/SwyQuill'
const  cateList=PicCateAllList()
const replyRef=ref()
const emit=defineEmits(['updateList'])
const tent=ref()
const changeInput = (val)=>{
  queryData.reply = val
}
const queryData=reactive({
  community_code:'',
  title:'',
  content:'',
  status:'',
  reply:'',
  id:null
})
// 校验
const fromRules={
  reply:[{required: true, message: "请选择", trigger: "blur" }],
}
const activeName=ref('first')
// 回显
const EchoRepair=async (id)=>{
  let {data}=await getSermailboxRevert(id)
  Object.assign(queryData,data)
  if(queryData.content.includes('<p>')){
  tent.value=queryData.content.match(/<p>(.*?)<\/p>/)[1]
  }
}
const onSearCh=async ()=>{
 await replyRef.value.validate()
 await getSermailboxModify(queryData)
 emit('updateList')
 XXisShow.value=false
}
const XXclose=()=>{
  // console.log(queryData.content.match(/<p>(.*?)<\/p>/)[1]);
  XXisShow.value=false
  replyRef.value.resetFields()
  tent.value=''
  Object.assign(queryData,{
    community_code:'',
  title:'',
  content:'',
  status:'',
  reply:'',
  id:null
  })
}
// 暴露
defineExpose({
  EchoRepair
})
</script>
<template>
  <div>
    <el-drawer v-model="XXisShow" title="回复信件" size="50%" style="position: relative;" @close="XXclose">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="报修信息" name="first">
      <el-form :model="queryData" :inline="true" class="demo-form-inline" label-position="top">
        <el-form-item label="所属小区" >
        <el-select  placeholder="请输入" v-model="queryData.community_code" clearable style="width: 325px;" disabled>
          <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="信件标题">
        <el-input style="width: 325px;"  placeholder="请输入" clearable v-model="queryData.title" disabled></el-input>
      </el-form-item>
      <el-form-item label="信件内容">
        <template #default="{row}">
          <el-text class="mx-1" type="info" disabled>{{ tent?tent:queryData.content }}</el-text>
        </template>
      </el-form-item>
            </el-form>
    </el-tab-pane>
    <!-- 回复信件 -->
    <el-tab-pane label="回复信件" name="second">
      <el-form :model="queryData" :inline="true" class="demo-form-inline" label-position="top"   ref="replyRef" :rules="fromRules">
    <el-form-item label="状态">
      <el-radio-group v-model="queryData.status" class="ml-4" style="width: 700px;">
          <el-radio :label="0" size="large">未读</el-radio>
          <el-radio :label="1" size="large">已读回复</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item label="信件内容" prop="reply">
      <SwyQuill :value="queryData.reply" :min-height="192" @update:input="changeInput"></SwyQuill>
    </el-form-item>
            </el-form>
    </el-tab-pane>
  </el-tabs>
          <span style="position: absolute; bottom: 30px;right:20px;">  <el-button @click="XXisShow=false">取消</el-button>
            <el-button type="primary" @click="onSearCh">确定</el-button></span>
  </el-drawer>
  </div>
</template>
<style lang="scss" scoped>

</style>